<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-tooltip content="编辑" effect="dark" placement="top">
              <el-button type="text" size="mini" icon="el-icon-edit" @click="edit(row)" />
            </el-tooltip>
          </template></el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import {
  toDoTasksPage,
  remove
} from '@neu/dcam-ui/api/task'
import { getRouter, list } from '@neu/dcam-ui/api/businessProcess'
import { formatDate } from '@neu/biz-core/utils/utils'
export default {
  name: 'WorkflowFormItemPage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: toDoTasksPage,
      d: remove,
      typeList: [],
      insideColumns: [{
        title: '工单号',
        key: 'code',
        sortable: 'custom'
      },
      {
        title: '标题',
        key: 'name',
        sortable: 'custom'
      },
      { title: '工单分类', key: 'classification', sortable: 'custom',
        render: (h, params) => {
          const filterData = this.typeList ? this.typeList.filter(ele => ele.code === params.row.classification) : []
          const text = filterData.length > 0 ? filterData[0].name : ''
          return h('span', [
            h('el-tag', text)
          ])
        }
      },
      {
        title: '当前状态',
        key: 'currentNode'
      },
      {
        title: '创建人',
        key: 'applyUserName'
      },
      { title: '创建时间', width: 100, key: 'createTime', render: (h, params) => { return h('span', formatDate(params.row.createTime)) }, display: true }
      ]
    }
  },
  created() {
    list({}).then(res => {
      this.typeList = res.data
    })
    this.fetch()
  },
  methods: {
    edit(row) {
      getRouter(row.classification).then(res => {
        const data = res.data
        if (data) {
          this.$router.push({ name: data.routerName, params: { code: row.code, processInstanceId: row.processInstanceId }})
        }
      })
    }
  }
}
</script>
